<template>
	<view>
		<view class="head" :style="{ 'padding-top': pdTop + 'px', 'padding-bottom': pdTop + 20 + 'px' }">
			<image src="../../static/userPic.png"></image>
			<text>{{studentName}} {{log.checkinId?'收到的课后点评':'的新动向'}}</text>
		</view>
		<view class="logBox">
			<text class="title">课后点评</text>
			<view class="shopName" v-if="log.checkinId">{{shopInfo.name}} 的点评</view>
			<text class="memo" v-if="log.memo">{{ log.memo ? log.memo : '' }}</text>
			<view class="imgBox" v-if="log.resList && log.resList.length"><image v-for="(item, index) in log.resList" :src="item.url" :key="index" mode="widthFix"></image></view>
		</view>
		<view class="shopBox" v-if="log.checkinId && shopInfo.status==1">
			<text class="title">机构介绍</text>
			<view class="shopSwiper">
				<shopSwiper v-if="bannerList.length" :swiperList="bannerList" :dotsStyles="dotsStyles"></shopSwiper>
			</view>
			<view class="shopInfo">
				<image src="" class="shopLogo" :src="shopInfo.logo ? shopInfo.logo : '../../static/loding.png'"></image>
				<text class="shopName">{{ shopInfo.name }}</text>
			</view>
			<view class="goBtn">
				<text @tap="toPage" data-url="shopDetail" :data-id="shopInfo.id">了解更多</text>
				<text class="iconfont icon-right"  @tap="toPage" data-url="shopDetail" :data-id="shopInfo.id"></text>
			</view>
		</view>
	</view>
</template>

<script>
import shopSwiper from '@/components/shopSwiper/shopSwiper.vue';
import Request from '@/sdk/pocky-request/index.js';
export default {
	components:{
		shopSwiper
	},
	data() {
		return {
			pdTop: uni.getSystemInfoSync().statusBarHeight + 20,
			id: 0,
			studentName:'',
			log: {},
			shopInfo: {},
			bannerList: []
		};
	},
	methods: {
		getLog() {
			let r = Request();
			r.request({
				url: '/user/memberlog/detail.do',
				method: 'post',
				data: {
					id: this.id
				}
			}).then(res => {
				if (res.data.code == 1) {
					this.log = res.data.data;
					if (res.data.data.checkinId && res.data.data.storeId) {
						let r2 = Request();
						r.request({
							url: '/store/detail.do',
							method: 'post',
							data: {
								id: res.data.data.storeId
							}
						}).then(shopRes => {
							if (shopRes.data.code == 1) {
								this.shopInfo = shopRes.data.data;
								this.bannerList = res.data.data.resList.filter(x => {
									return x.location == 4;
								});
							}
						});
					}
				}
			});
		},
		getShop() {}
	},
	onLoad(cfm) {
		this.id = cfm.id.split(',')[0];
		this.studentName=cfm.id.split(',')[1]
		this.getLog();
	}
};
</script>

<style lang="less">
.head {
	display: flex;
	align-items: center;
	background-image: url(../../static/logBg.png);
	background-size: 100% 100%;
	padding-left: 34upx;
	padding-right: 34upx;
	image {
		width: 82upx;
		height: 82upx;
		border-radius: 50%;
		border: 1px solid #ffffff;
		margin-right: 20upx;
	}
	text {
		font-size: 36upx;
		color: #ffffff;
	}
}
.logBox {
	display: flex;
	flex-direction: column;
	background-color: #ffffff;
	border-top-left-radius: 20upx;
	border-top-right-radius: 20upx;
	margin-top: -20px;
	padding: 46upx 56upx;
	align-items: flex-start;
	.title {
		font-size: 32upx;
		background-image: url(../../static/titleBg.png);
		background-size: 100% 2px;
		background-repeat: no-repeat;
		background-position: bottom, left;
		padding: 0 20upx 10upx 0;
	}
	.shopName {
		color: #a0a0a0;
		padding: 10upx 40upx;
		font-size: 28upx;
		margin-top: 10upx;
	}
	.memo {
		font-size: 28upx;
		color: #202932;
		padding: 10upx 40upx;
	}
	.imgBox {
		display: flex;
		flex-direction: column;
		padding: 0 40upx;
		width: 100%;
		margin-top: 20upx;
		image {
			margin-bottom: 20upx;
			width: 100%;
		}
	}
}
.shopBox {
	display: flex;
	flex-direction: column;
	background-color: #ffffff;
	padding: 46upx 56upx;
	border-top: 1px solid #f0f0f0;
	align-items: flex-start;
	.title {
		font-size: 32upx;
		background-image: url(../../static/titleBg.png);
		background-size: 100% 2px;
		background-repeat: no-repeat;
		background-position: bottom, left;
		padding: 0 20upx 10upx 0;
	}
	.shopInfo {
		width: 100%;
		display: flex;
		align-items: center;
		margin-top: 30upx;
		image {
			width: 120upx;
			height: 120upx;
			border-radius: 50%;
			margin-right: 20upx;
		}
	}
	.goBtn{
		margin-top: 30upx;
		width: 100%;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 28upx;
		color: #8f8f8f;
	}
}
</style>
